<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display:none;">
			<div class="a">
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchForm" :model="searchForm">
          		<el-form-item v-show="departName==='总部'">
	              <el-select size="small" style="width:150px;" v-model="searchForm.belongs_department" clearable filterable allow-create placeholder="所属部门">
                  <el-option v-for="department in belongsDepartment" :label="department.name" :value="department.name"></el-option>
	              </el-select>
			  		  </el-form-item>
			  		  
			  		  <el-form-item prop="type">
	              <el-select size="small" style="width:120px;" v-model="searchForm.type" 
                  placeholder="所属分类">
                  <el-option v-for="(value,key) in type" :label="value" :value="key"></el-option>
	              </el-select>
			  		  </el-form-item>
 
			  		  <el-form-item prop="name" style="width:150px">
                <el-input v-model="searchForm.name" size="small" placeholder="用品名称"></el-input>
              </el-form-item>
			  		  
			  		  <el-form-item prop="app_name" style="width:150px">
                <el-input v-model="searchForm.app_name" size="small" placeholder="领用人/归还人"></el-input>
              </el-form-item>

	            <el-form-item prop="use_time">
                <el-date-picker size="small" v-model="searchForm.use_time" 
                  placeholder="选择领用日期范围"
                  type="daterange"
                  @change="startDateChange" style="width:210px;">
                </el-date-picker>
	            </el-form-item>
	            <el-form-item prop="return_time">
                <el-date-picker size="small"
                  v-model="searchForm.return_time" 
                  placeholder="选择归还日期范围"
                  type="daterange"
                  @change="endDateChange" style="width:210px;">
                </el-date-picker>
	            </el-form-item>

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
              <el-form-item>
	              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
	                <el-button size="small" @click="resetBack">重置</el-button>
	              </el-tooltip>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="点击刷新当前页面" placement="right">
	                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
	              </el-tooltip>
	            </el-form-item>

            </el-form>
          </el-col>
			  </el-row>

			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="dataList"
                @row-dblclick="showInfo"
	              element-loading-text="{:L('DATA_LOGIN')}"
	              empty-text="暂无数据!"
	              highlight-current-row ref="select" border>
              <!--<el-table-column type="selection" width="55"></el-table-column>-->

			  	    <el-table-column label="{:L('INDEX')}" type="index" width="65" >
			  	    </el-table-column>
			  	    
			  	    <el-table-column  align="center" prop="app_name" label="领用人" width="150">
	            </el-table-column>

              <el-table-column  align="center" prop="name" label="名称" >
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="type" label="类别" width="120">
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="specification" label="规格" >
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="unit" label="单位" >
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="price" label="单价" >
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="use_num" label="领用数量" width="120">
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="use_time" label="领用时间" width="200">
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="return_num" label="归还数量" width="120">
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="return_time" label="归还时间" width="200">
	            </el-table-column>
	            
	            <el-table-column  align="center" prop="remark" label="备注" width="150">
	            	<template scope="scope">
                	{{ scope.row.remark | handleString(4) }}
              	</template>
	            </el-table-column>
	            
	            
	          </el-table>
          </el-col>
			  </el-row>

			  <el-row>
			  	<el-col :span="12">
			      <div class="grid-content bg-purple">
              <span class="wrapper">
                <el-tooltip content="点击新增一个领用" placement="right">
                  <el-button size="small" @click="openDialog('add')" type="primary">新增领用</el-button>
                </el-tooltip>
                <el-tooltip content="点击新增一个归还" placement="right">
                  <el-button size="small" @click="openDialog('return')" type="primary">新增归还</el-button>
                </el-tooltip>
              </span>
			      </div>
			    </el-col>
			  	<el-col :span="12" >
			      <div class="grid-content bg-purple-light pull-right">
			        <!-- page -->
			        <include file="Common:_pagination" />
			        <!-- / page -->
			      </div>
			    </el-col>
			  </el-row>
			</div>
			<div class="dialogWrapper" v-show="show" style="display: none">
			  
			  <include file="_add" />
		    <include file="_return" />
        <include file="_infoContents" />
        
			</div>
		</div>
	</div>
</block>
<block name="scripts">
<script>
	page.returnFormUrl = "{:U(returns)}";
	var gname = '';
	var gspec = '';
	var gunit = '';
	var maxNum= '';
	var rgname = '';
	var rgspec = '';
	var rgunit = '';
	var rmaxNum= '';
	window.defaultOption.setDatas({
		multipleSelection: [],
		dialogLabelWidth:"120px",
		infoDialog:false,
    infoData:{},
    dataList:[],
    type:{:json_encode($type)},
    app_names:{:json_encode($app_names)},
    belongsDepartment:{:json_encode($belongsDepartment)},
    departName:{:json_encode($departName)},
    names:[],
    units:[],
    specifications:[],
    rnames:[],
    runits:[],
    rspecifications:[],
    addRules:{
			app_name:[
      {required: true, message: '请输入领用人姓名'},
			],
			name:[
      {required: true, message: '请选择物品名称'},
			],
			specification:[
      {required: true, message: '请选择物品规格'},
			],
			unit:[
      {required: true, message: '请选择物品单位'},
			],
			use_num:[
      {required: true, message: '请输入数字值', trigger: 'blur', type: 'number'},
			],
			use_time:[
      {required: true, message: '请选择领用时间',trigger: 'change'},
			]
		},
		returnRules:{
			app_name:[
      {required: true, message: '请输入归还人姓名'},
			],
			name:[
      {required: true, message: '请选择物品名称'},
			],
			specification:[
      {required: true, message: '请选择物品规格'},
			],
			unit:[
      {required: true, message: '请选择物品单位'},
			],
			return_num:[
      {required: true, message: '请输入数字值', trigger: 'blur', type: 'number'},
			],
			return_time:[
      {required: true, message: '请选择领用时间',trigger: 'change'},
			]
		},
		
	}).setForm('add',{
		app_name:"",
		application:'',
    name:"",
    specification:"",
    unit:"",
    use_num:"",
    use_time:"",
    inspector:"",
    info_status:"1",
    remark:"",
    belongs_department:"",
 },true).setForm('return',{
    app_name:"",
		application:'',
    name:"",
    specification:"",
    unit:"",
    return_num:"",
    return_time:"",
    inspector:"",
    info_status:"1",
    remark:"",
    belongs_department:"",
  },true).setForm('search',{
  	belongs_department:{:json_encode($departName)},
		type:"",
    app_name:'',
    name:"",
    use_time:"",
    return_time:"",
	}).setVueHook('mounted', function(){
	    var vmThis = this;
	    var names = [];
	    this.$http.get('{:U("InventoryInformation/getData")}').then(function(response){
	      names = response.body;
	      vmThis.$set(vmThis, 'names', names);
	      console.log(names);
	    });
	  }).setMethod('nameChange', function(name){
	    var vmThis = this;
	    var specifications = [];
	    gname  = name;
	    this.$http.get('{:U("InventoryInformation/getSpecByName")}', {params:{name:name} }).then(function(response){
	      specifications = response.body;
	      vmThis.$set(vmThis, 'specifications', specifications);
	      vmThis.$set(vmThis['addForm'], 'specification', specifications[0]);
	      console.log(specifications);
	    });
	  }).setMethod('specChange', function(specification){
	    var vmThis = this;
	    var units = [];
	    gspec = specification;
	    this.$http.get('{:U("InventoryInformation/getUnitsBySpec")}', {params:{specification:specification, name:gname} }).then(function(response){
	      units = response.body;
	      vmThis.$set(vmThis, 'units', units);
	      vmThis.$set(vmThis['addForm'], 'unit', units[0]);
	      console.log(units);
	    });
	  }).setMethod('unitChange', function(unit){
	    var vmThis = this;
	    var units = [];
	    this.$http.get('{:U("InventoryInformation/getMaxNum")}', {params:{unit:unit,specification:gspec, name:gname} }).then(function(response){
	      maxNum = response.body[0];
	      vmThis.$set(vmThis, 'use_num.max', maxNum);
	      vmThis.$set(vmThis['addForm'], 'use_num', "1");
	      console.log(maxNum);
	    });
	  }).setVueHook('mounted', function(){
	    var vmThis = this;
	    var names = [];
	    this.$http.get('{:U("UseReturn/getData")}').then(function(response){
	      rnames = response.body;
	      vmThis.$set(vmThis, 'rnames', rnames);
	      console.log(rnames);
	    });
	  }).setMethod('rnameChange', function(name){
	    var vmThis = this;
	    var specifications = [];
	    rgname  = name;
	    this.$http.get('{:U("UseReturn/getSpecByName")}', {params:{name:name} }).then(function(response){
	      rspecifications = response.body;
	      vmThis.$set(vmThis, 'rspecifications', rspecifications);
	      vmThis.$set(vmThis['returnForm'], 'specification', rspecifications[0]);
	      console.log(rspecifications);
	    });
	  }).setMethod('rspecChange', function(specification){
	    var vmThis = this;
	    var runits = [];
	    rgspec = specification;
	    this.$http.get('{:U("UseReturn/getUnitsBySpec")}', {params:{specification:specification, name:rgname} }).then(function(response){
	      runits = response.body;
	      vmThis.$set(vmThis, 'runits', runits);
	      vmThis.$set(vmThis['returnForm'], 'unit', runits[0]);
	      console.log(runits);
	    });
	  }).setMethod('runitChange', function(unit){
	    var vmThis = this;
	    this.$http.get('{:U("UseReturn/getMaxNum")}', {params:{unit:unit,specification:rgspec, name:rgname} }).then(function(response){
	      rmaxNum = response.body;
	      vmThis.$set(vmThis, 'return_num.max', rmaxNum);
	      vmThis.$set(vmThis['returnForm'], 'return_num', "1");
	      console.log(rmaxNum);
	    });
	  }).setMethod('resetBack',function(){
    window.location.href="{:U('index')}";
  }).setMethod('getType', function(type, field){
 		return this[field][type];
  }).setMethod('startDateChange', function(v){
    this.searchForm.start1 = v.slice(0,10);
    this.searchForm.start2 = v.slice(13);
  }).setMethod('endDateChange', function(v){
    this.searchForm.end1 = v.slice(0,10);
    this.searchForm.end2 = v.slice(13);
  }).setMethod('returnTime',function(v){
    this.returnForm.return_time = v;
  }).setMethod('addUseTime',function(v){
    this.addForm.use_time = v;
  }).setMethod('returnFormSubmit',function(url ,form){
    this.commonSubmitLogic(url, form);
  }).setMethod('handleChange', function(val){
	  this.multipleSelection = val; //点击勾选用这个
		//点击选中用这个 开始
		/*this.deleteArrAllItem('multipleSelection');
		this.multipleSelection.push(val) ;*/
		//点击选中用这个 结束
	    
	}).setMethod("handleDeletes", function(url){
	  if(this.multipleSelection.length <= 0 || this.multipleSelection.length>1){
		  this.$message.error('请选择一条信息');
		  return false;
	  }else{
		  if (!arguments[2]) {
			  url= this.page.deleteUrl;
		  }
		  var selectedIds = new Array();
		  for(var i=0; i<this.multipleSelection.length; i++){
			  selectedIds[i] = this.multipleSelection[i].id;
		  }
		  var vmThis = this;
		  this.$confirm('确定删除?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(function(){
			  vmThis.$http.post(url, {ids:selectedIds}).then(function(response){
				  vmThis.$message({
					  type: 'success',
					  message: '删除成功!'
				  });
				  vmThis.loadDatalist();
			  }, function(response){
				  vmThis.$message({
					  type: 'error',
					  message: '删除失败'
				  });
			  })
		  }).catch(function() {
			  vmThis.$message({
				  type: 'info',
				  message: '已取消操作'
			  });
		  });
	  }

  }).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
  });
</script>
</block>